<template>
  <view class="container">
    <u-popup :show="show" :closeable="false" mode="bottom" @close="close" :round="10">
      <view class="popDialog">
        <view class="flex-between p-30">
          <text class="font-30 text-bold">当前选购的商品</text>
          <view class="c-8d flex-y-center" @click="deleteAllCart()">
            <u-icon name="trash" color="#5D6581" size="18"></u-icon>
            清空
          </view>
        </view>
        <scroll-view :scroll-y="true" style="height: 54vh">
          <view class="goods-list" v-for="(goodsitem, goodsindex) in cartList" :key="goodsindex">
            <view class="list-image">
              <image :src="$util.img(goodsitem.sku_image)" mode="aspectFill" lazy-load></image>
            </view>
            <view class="list-info">
              <view class="font-30 text-bold ellipsis">{{ goodsitem.sku_name }}</view>
              <view class="c-8d font-24 m-b-10 ellipsis" style="height: 42rpx">{{ goodsitem.introduction }}</view>
              <view class="c-8d font-24">已售:{{ goodsitem.num }}</view>
              <view class="flex-between">
                <view class="font-36 text-bold">
                  <text class="font-20">￥</text>
                  {{ goodsitem.price }}
                </view>
                <view class="list-gg-btn">
                  <u-icon
                    name="minus-circle"
                    color="#00D075"
                    size="20"
                    @click="editCart(goodsitem, goodsindex, 'sub')"
                  ></u-icon>
                  <text>{{ goodsitem.num }}</text>
                  <u-icon
                    name="plus-circle-fill"
                    color="#00D075"
                    size="20"
                    @click="editCart(goodsitem, goodsindex, 'add')"
                  ></u-icon>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "cartGoods",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    totalPrice: {
      type: String,
      default: "0",
    },
    totalCount: {
      type: String,
      default: 0,
    },
    canteenId: {
      type: Number,
      default: 0,
    },
    type: {
      type: String,
      default: "", //默认是空  传递mall代表康养优选里面的秒送
    },
  },
  data() {
    return {
      num: 1,
      cartList: [],
    };
  },
  created() {
    this.getCartList();
  },
  methods: {
    close() {
      this.$emit("close");
    },
    editCart(item, index, type) {
      let amount = type == "add" ? item.num + 1 : item.num - 1;
      // 限购判断
      if (item.is_limit && amount > item.max_buy) {
        this.$util.showToast({
          title: "限购" + item.max_buy + "件",
        });
        return false;
      }
      if (amount > 0) {
        this.$api.sendRequest({
          url: "/canteen/api/cart/edit",
          data: {
            cart_id: item.cart_id,
            num: amount,
          },
          success: (res) => {
            if (res.code == 0) {
              // 修改商品列表购物车数量
              this.cartList[index].num = amount;
              this.$emit("updateCart");
            } else {
              this.$util.showToast({
                title: res.message,
              });
            }
          },
        });
      } else {
        this.deleCart(item, index);
      }
    },
    /**
     * 删除购物车单个商品
     *
     * @param item - 要删除的商品对象
     */
    deleCart(item, index) {
      this.$api.sendRequest({
        url: "/canteen/api/cart/delete",
        data: {
          cart_id: item.cart_id,
        },
        success: (res) => {
          if (res.code == 0) {
            // 修改商品列表购物车数量
            this.cartList.splice(index, 1);
            this.$emit("updateCart");
            this.$util.showToast({
              title: "删除成功",
            });
          } else {
            this.$util.showToast({
              title: res.message,
            });
          }
          this.$forceUpdate();
        },
      });
    },
    deleteAllCart() {
      // 循环购物车列表，取购物车id，用逗号拼接，发送删除请求
      // let ids = this.cartList.map((item) => item.id).join(",");

      this.$api.sendRequest({
        url: "/canteen/api/cart/clear",
        data: {
          canteen_id: this.canteenId || 0,
        },
        success: (res) => {
          if (res.code == 0) {
            // 修改商品列表购物车数量
            this.cartList = [];
            this.$emit("updateCart");
            this.$util.showToast({
              title: "删除成功",
            });
          } else {
            this.$util.showToast({
              title: res.message,
            });
          }
          this.$forceUpdate();
        },
      });
    },
    //购物车列表
    getCartList() {
      this.$api.sendRequest({
        url: "/canteen/api/cart/goodsLists",
        data: {
          canteen_id: this.canteenId,
        },
        success: (res) => {
          if (res.code == 0) {
            var arr = res.data;
            // 根据商品列表数据与购物车列表数据进行比对，更新商品列表数据的购物车数量字段数据

            this.cartList = arr;

            this.$forceUpdate();
          } else {
            this.$util.showToast({
              title: res.message,
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 弹窗
.popDialog {
  background: #f8f9fa;
  height: 78vh;
  border-radius: 20rpx 20rpx 0 0;

  .delimg {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
  }
}

.goods-list {
  display: flex;
  align-items: center;
  margin: 0 24rpx 24rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;

  .list-info {
    width: 70%;
  }

  .list-image {
    position: relative;
    width: 197rpx;
    height: 197rpx;
    border-radius: 20rpx;
    margin-right: 10rpx;
    image {
      width: 100%;
      height: 100%;
    }
    .label {
      position: absolute;
      top: 14rpx;
      left: 22rpx;
      width: 59rpx;
      height: 35rpx;
      line-height: 35rpx;
      text-align: center;
      border-radius: 10rpx;
      background-color: $color-title2;
      color: #fff;
      font-size: 20rpx;
    }
  }

  .list-gg {
    width: 85rpx;
    height: 43rpx;
    line-height: 43rpx;
    text-align: center;
    background-color: $color-title2;
    color: #fff;
    font-size: 22rpx;
    border-radius: 10rpx;
  }

  .list-gg-btn {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #1c274c;
    text {
      display: inline-block;
      width: 40rpx;
      text-align: center;
    }
  }
}

.fixfooter {
  display: flex;
  justify-content: space-between;
  .bag {
    position: relative;
    margin-right: 40rpx;
    image {
      width: 56rpx;
      height: 65rpx;
    }
    .badgebox {
      position: absolute;
      top: -12rpx;
      right: -10rpx;
    }
  }
  .submit {
    width: 265rpx !important;
  }
}
</style>
